<template>
  <Box title="飞行监控">
<!--    地图-->
    <div class="map"></div>
    <div class="fly-box f-r a-c">
      实时无人机：<span class="green">{{ control.online }}</span> 丨 离线无人机：<span class="red">{{ control.offline }}</span>
    </div>
    <div class="photo-box f-c">
        <div class="photo-box-header f-s f-r a-c j-b">
          <div class="tabs-text" >
            <div
                @click="tabName = item"
                :class="['tab-text', item === tabName ? 'active' : '']" v-for="item in textTabList">
              {{ item}}
            </div>
          </div>
          <div class="num">{{ total }}</div>
        </div>
      <div class="photo-box-body">
        <el-scrollbar>
          <el-row :gutter="8">
            <el-col :span="12" v-for="item in assetList" :key="item.id">
              <div class="photo-item">
                <img :src="item.cover" alt="">
                <div class="video-control">
                  <el-icon color="#fff" size="16"><VideoPlay /></el-icon>
                  <span class="time"> {{ item.timeNum }}</span>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-scrollbar>
      </div>
    </div>

    <div class="photo-tools f-r a-c j-a">
      <el-popover
          :offset="30"
          placement="top"
          trigger="hover"
      >
        <template #reference>
          <div class="photo-tools-icon eye"></div>

        </template>
        <div>
          <el-checkbox-group v-model="toolCheckList">
            <el-checkbox v-for="item in toolList" :label="item.name" :value="item.value"></el-checkbox>
          </el-checkbox-group>
        </div>
      </el-popover>
      <el-popover
          :offset="30"
          :width="300"
          placement="top"
          trigger="hover"
      >
        <template #reference>
          <div class="photo-tools-icon search"></div>
        </template>
        <div class="f-r a-c">
         <el-input v-model="searchValue" placeholder="请输入" style="width: 220px"></el-input>
          <el-button style="margin-left: 10px" type="primary" size="mini" :icon="Search"></el-button>
        </div>
      </el-popover>

      <div class="photo-tools-icon location"  @click="toolClick('location')"></div>
      <div class="photo-tools-icon jia"  @click="toolClick('jia')"></div>
      <div class="photo-tools-icon jian"  @click="toolClick('jian')"></div>
    </div>

    <div class="fly-map" id="flyMap"></div>
  </Box>
</template>

<script setup>
import {Search, VideoPlay} from "@element-plus/icons-vue";
import Box from './box'
import {onMounted, onUnmounted, ref} from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";
import {MapKey} from "@/plugins/amap";
const control = ref({
  online: 0,
  offline: 0,
})
const total = ref(10)
const tabName = ref('视频资源')
const textTabList = ref([
    '视频资源',
    '图片资源'
])
const assetList = ref([
  {
    type: 'video',
    url: 'https://www.w3school.com.cn/i/movie.mp4',
    // 封面
    cover: require('@/assets/monitor/default_item.png'),
    timeNum: '00:00:00'
  },
  {
    type: 'video',
    url: 'https://www.w3school.com.cn/i/movie.mp4',
    // 封面
    cover: require('@/assets/monitor/default_item.png'),
    timeNum: '00:00:00'
  },
  {
    type: 'video',
    url: 'https://www.w3school.com.cn/i/movie.mp4',
    // 封面
    cover: require('@/assets/monitor/default_item.png'),
    timeNum: '00:00:00'
  },
  {
    type: 'video',
    url: 'https://www.w3school.com.cn/i/movie.mp4',
    // 封面
    cover: require('@/assets/monitor/default_item.png'),
    timeNum: '00:00:00'
  },
  {
    type: 'video',
    url: 'https://www.w3school.com.cn/i/movie.mp4',
    // 封面
    cover: require('@/assets/monitor/default_item.png'),
    timeNum: '00:00:00'
  },
  {
    type: 'video',
    url: 'https://www.w3school.com.cn/i/movie.mp4',
    // 封面
    cover: require('@/assets/monitor/default_item.png'),
    timeNum: '00:00:00'
  },
  {
    type: 'video',
    url: 'https://www.w3school.com.cn/i/movie.mp4',
    // 封面
    cover: require('@/assets/monitor/default_item.png'),
    timeNum: '00:00:00'
  }
])

const toolCheckList = ref([])
const toolList = ref([
  {
    name: '三维模型',
    value: '三维模型'
  },
  {
    name: '二维正射图',
    value: '二维正射图'
  },
  {
    name: '全景图',
    value: '全景图'
  },
  {
    name: '无人机',
    value: '无人机'
  },
  {
    name: '机场',
    value: '机场'
  },
  {
    name: '飞手',
    value: '飞手'
  },
  {
    name: '特勤',
    value: '特勤'
  },
  {
    name: '高程信息',
    value: '高程信息'
  },
  {
    name: '飞行轨迹',
    value: '飞行轨迹'
  },
  {
    name: '彩城',
    value: '彩城'
  }
])
const searchValue = ref('')
const toolClick = (type) => {
  if (type === 'location') {
    console.log('location')
    // 定位
    map.setZoomAndCenter(14, [116.397428, 39.90923])
  } else if (type === 'jia') {
    console.log('jia')
    // 地图放大
    map.setZoom(map.getZoom() + 1)
  } else if (type === 'jian') {
    console.log('jian')
    map.setZoom(map.getZoom() - 1)
  }
}


/**
 * 地图
 */
let map = null;

onMounted(() => {
  AMapLoader.load({
    key: MapKey, // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  })
      .then((AMap) => {
        map = new AMap.Map("flyMap", {
          // 设置地图容器id
          viewMode: "3D", // 是否为3D地图模式
          layers: [new AMap.TileLayer.Satellite()],
          zoom: 14, // 初始化地图级别
          center: [116.397428, 39.90923], // 初始化地图中心点位置
        });
      })
      .catch((e) => {
        console.log(e);
      });
});

onUnmounted(() => {
  map?.destroy();
});
</script>

<style lang="scss">
.fly-map {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}
.photo-tools {
  width: 333px;
  height: 54px;
  background: #FFFFFF;
  box-shadow: 0px 0px 24px 0px rgba(0,0,0,0.15);
  border-radius: 37px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 30px;
  z-index: 999;
  .photo-tools-icon {
    background-repeat: no-repeat;
    background-size: 100% 100%;
    cursor: pointer;
  }
  .eye {
    width: 20px;
    height: 15px;
    background-image: url("~@/assets/monitor/eye.png");
  }
  .search {
    width: 16px;
    height: 16px;
    background-image: url("~@/assets/monitor/search.png");
  }
  .location {
    width: 16px;
    height: 16px;
    background-image: url("~@/assets/monitor/location.png");
  }
  .jia {
    width: 16px;
    height: 16px;
    background-image: url("~@/assets/monitor/+.png");
  }
  .jian {
    width: 16px;
    height: 5px;
    background-image: url("~@/assets/monitor/-.png");
  }
}
.map {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.fly-box {
  padding: 0 20px;
  height: 50px;
  background: rgba(0,0,0,0.3);
  border-radius: 25px;
  position: absolute;
  top: 25px;
  right: 30px;
  z-index: 2;
  color: #ffffff;
}
.photo-box {
  position: absolute;
  top: 120px;
  height: calc(100% - 180px);
  right: 30px;
  width: 360px;
  background: rgba(255,255,255,0.9);
  border-radius: 20px;
  opacity: 0.9;
  z-index: 9;
  .photo-item{
    width: 100%;
    height: 168px;
    margin-bottom: 8px;
    img {
      width: 100%;
      height: 100%;
    }
    position: relative;
    .video-control {
      width: 100%;
      position: absolute;
      bottom: 5px;
      right: 5px;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      cursor: pointer;
      .time {
        margin-left: 10px;
        color: #ffffff;
        font-size: 14px;
      }
    }

  }
  .photo-box-body {
    flex-grow: 1;
    .el-scrollbar {
      padding: 20px;
      .el-scrollbar__bar.is-horizontal  {
        display: none !important;
      }
    }
    overflow: hidden;
  }
  .photo-box-header {
    padding: 20px;
    padding-bottom: 0;
    .num {
      height: 18px;
      background: #FF6935;
      border-radius: 9px;
      padding: 0 4px;
      text-align: center;
      color: #ffffff;
      font-size: 12px;
    }
  }
  .tabs-text {
    display: flex;
    align-items: center;
    .tab-text {
      margin-right: 20px;
      font-family: Source Han Sans CN;
      font-weight: 500;
      font-size: 18px;
      color: #1A1A1A;
      line-height: 36px;
      cursor: pointer;
      &.active {
        color: #17BDB2;
      }
    }
  }
}
.green {
  color: #27FF45
}
.red {
  color: #FF2020
}
.green2 {
  color: #17BDB2;
}
</style>
